<app-notification />
<ng-container *ngIf="notFound()">
  <app-missing [args]="notFound()" />
</ng-container>
<div
  class="mx-auto max-w-screen-xl py-8 2xl:max-w-screen-2xl"
  *ngIf="!notFound()"
  [hidden]="!data.suite">
  <main class="wsl-min-h-screen-2 container mx-auto space-y-4 px-4 xl:px-8">
    <div class="wsl-page-head wsl-box">
      <nav aria-label="breadcrumb">
        <ol>
          <li>
            <a routerLink="..">{{ data.suite?.teamName }}</a>
          </li>
          <li aria-current="page" wslDropdown>
            <div
              class="wsl-dropdown-toggle flex cursor-pointer items-center"
              id="wsl-suites-dropdown"
              aria-haspopup="true"
              aria-expanded="false">
              <span>{{ data.suite?.suiteName }}</span>
              <ng-icon name="heroChevronDown" />
            </div>
            <ul
              class="wsl-dropdown-menu hidden w-48 divide-y divide-gray-100 dark:divide-gray-700"
              aria-labelledby="wsl-suites-dropdown">
              <li
                *ngFor="let suiteItem of data.suites"
                (click)="switchPage(suiteItem.suiteSlug)"
                class="wsl-dropdown-item"
                [ngClass]="{
                  'bg-sky-100 dark:bg-gray-800':
                    data.suite?.suiteSlug === suiteItem.suiteSlug
                }">
                {{ suiteItem.suiteName }}
              </li>
            </ul>
          </li>
        </ol>
      </nav>
      <div
        class="flex space-x-2 print:hidden"
        *ngIf="data.tab === 'versions' && hasData() && hasItems()">
        <div wslDropdown>
          <button
            class="wsl-btn-sm wsl-btn-muted wsl-dropdown-toggle flex h-full items-center space-x-1 delay-200"
            id="dropdown-button-subscribe"
            aria-haspopup="true"
            aria-expanded="false">
            <ng-icon
              class="wsl-text-muted"
              size="1.05rem"
              name="featherBell"
              [ngClass]="{
                'rotate-12': data.suite.subscription !== 'none'
              }" />
            <span>
              {{
                data.suite.subscription === 'none' ? 'Subscribe' : 'Subscribed'
              }}
            </span>
          </button>
          <ul
            class="wsl-dropdown-menu hidden w-max"
            aria-labelledby="dropdown-button-subscribe">
            <ng-container *ngFor="let level of data.levels">
              <li
                class="wsl-dropdown-item flex items-center space-x-2"
                [ngClass]="{
                  'bg-gray-200 dark:bg-gray-700':
                    data.suite.subscription === level.type
                }"
                (click)="subscription = level.type">
                <ng-icon
                  [name]="level.icon"
                  class="wsl-text-muted"
                  size="1.05rem" />
                <span
                  class="font-medium"
                  [ngClass]="
                    data.suite.subscription === level.type
                      ? 'text-gray-800 dark:text-gray-100'
                      : 'text-gray-600 dark:text-gray-300'
                  ">
                  {{ level.text }}
                </span>
              </li>
            </ng-container>
          </ul>
        </div>
      </div>
    </div>
    <nav>
      <ul class="flex space-x-4">
        <ng-container *ngFor="let tab of data.tabs">
          <li
            class="wsl-page-nav-item"
            [ngClass]="{ 'wsl-tab-active': data.tab === tab.type }"
            *ngIf="tab.shown"
            (click)="switchTab(tab.type)">
            <ng-icon [name]="tab.icon" size="1.25rem" />
            <p>{{ tab.name }}</p>
            <span *ngIf="tab.counter">{{ tab.counter }}</span>
          </li>
        </ng-container>
      </ul>
    </nav>
    <div [hidden]="data.tab !== 'versions' || !hasData() || hasItems()">
      <app-suite-first-batch />
    </div>
    <div [hidden]="data.tab !== 'versions' || !hasData() || !hasItems()">
      <app-suite-tab-batches />
    </div>
    <div [hidden]="data.tab !== 'testcases'">
      <app-suite-tab-cases />
    </div>
    <div [hidden]="data.tab !== 'settings'">
      <app-suite-tab-settings />
    </div>
  </main>
</div>
